<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片</title>

    <style>
        div {
            width: 1300px;
            height: 1000px;
            background-color: pink;
            background-image: url(../imgs/123.jpg);
            /* 背景图片平铺(默认) */
            /* background-repeat: repeat; */
            /* 背景图片不平铺 */
            background-repeat: no-repeat;
            /* 背景图片延X轴平铺 */
            /* background-repeat: repeat-x; */
            /* 背景图片延Y轴平铺 */
            /* background-repeat: repeat-y; */

            /* 
                background-position: 方位词
                方位词 right center与center right效果一致
                如果只指定了一个方位词，另外一个省略，则第二个默认居中对齐
             */
            /* background-position: center top; */
            /* background-position: right center; */
            background-position: center;
        }

        .hicon {
            background-color: pink;
            width: 200px;
            height: 40px;
            background-image: url(../imgs/icon1.png);
            background-position: left;
            background-repeat: no-repeat;
            text-indent: 2em;
            font-size: 14px;
            line-height: 40px;
        }

        body {
            background-image: url(../imgs/bgImg.jpeg);
            background-repeat: no-repeat;
            background-position: center 40px;
        }

    </style>

</head>
<body>
    
    <img src="背景图片位置调整.png" alt="">

    <br><br>

    <div></div>

    <h2>例子1：小图标加文字</h2>
    <h3 class="hicon">这是一个小图片</h3>

    <br>

    <h2>例子2：超大图片给body指定一个图片</h2>


</body>
</html>